<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

		<title>Caption This!</title>

		<!-- Library Resources -->
		<link rel="stylesheet" type="text/css" href="third_party/jquery.mobile/jquery.mobile.structure-1.2.0.min.css" >
		<link rel="stylesheet" type="text/css" href="third_party/jquery.mobile/jquery.mobile.theme-1.2.0.min.css" >
		
		<!-- Cordova Switch for different platforms -->
		<!-- From https://github.com/sebbie1o1/cordova-jquerymobile-boilerplate/blob/master/index.html -->
		<script>
			var userAgent = navigator.userAgent + '';
			if (userAgent.indexOf('iPad') > -1) {
				document.write('<script src="third_party/cordova/cordova.ios.js"></sc' + 'ript>');
				var mobile_system = 'ios';
			} else if (userAgent.indexOf('Android') > -1) {
				document.write('<script src="third_party/cordova/cordova.android.js"></sc' + 'ript>');
				var mobile_system = 'android';
			} else {
				var mobile_system = false;
			}
		</script>

		<!-- jquery must be second after cordova -->
		<script src="third_party/jquery.mobile/jquery-1.8.3.min.js" type="text/javascript"></script>
		<script src="third_party/knockout/knockout-2.2.0.debug.js" type="text/javascript"></script>
		<script src="third_party/ko-external-template/koExternalTemplateEngine_all.js" type="text/javascript"></script>

		<!-- KOX Lawnchair files -->
		<script src="third_party/kox_lawnchair/Lawnchair.js" type="text/javascript"></script>
		<script src="third_party/kox_lawnchair/kox_lawnchair.js" type="text/javascript"></script>
		<script src="third_party/kox_lawnchair/adapters/webkit-sqlite.js" type="text/javascript"></script>
		
		<!-- Swipe files -->
		<script src="third_party/swipe/swipe.js" type="text/javascript"></script>

		<!-- Include all style sheets files -->
		<!-- Fixes -->
		<link rel="stylesheet" type="text/css" href="style/css/fixes.css">
		<link rel="stylesheet" type="text/css" href="style/css/main_page.css">
		<link rel="stylesheet" type="text/css" href="style/css/voting_results.css">

		<!-- Our Models -->
		<script src="code/js/models/caption.js" type="text/javascript"></script>

		<!-- Our View Models -->
		<script src="code/js/viewmodels/gamestate.js" type="text/javascript"></script>
		<script src="code/js/viewmodels/options.js" type="text/javascript"></script>
		<script src="code/js/viewmodels/selectimage.js" type="text/javascript"></script>
		<script src="code/js/viewmodels/captionimage.js" type="text/javascript"></script>
		<script src="code/js/viewmodels/vote.js" type="text/javascript"></script> 
		<script src="code/js/viewmodels/voting_results.js" type="text/javascript"></script>
		<script src="code/js/viewmodels/pick_friends.js" type="text/javascript"></script>

		<!-- Our main VM controller - Always after other view models-->
		<script src="code/js/controllers/main.js" type="text/javascript"></script>

		<!-- jMobile must be last and bootstrap second to last-->
		<script src="code/js/bootstrap.js" type="text/javascript"></script>
		<script src="third_party/jquery.mobile/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>

	</head>
	<body>
		<div data-role="page" data-theme="a">
			<div data-role="header">				
					<a data-role="button" data-inline="true" data-mini="true"
						data-icon="back" data-bind="event: {vclick: Back}, visible: backEnabled()">Back</a>
					<h1 data-bind="text: title">Select Image</h1>
					<a data-role="button" data-inline="true" data-mini="true"
						data-icon="forward" data-bind="event: {vclick: Forward}, visible: forwardEnabled()">Forward</a> 				
			</div><!-- /header -->

			<!-- The comment block below is actually Knockout binding syntax -->
			<!-- ko template: {name: display_page, afterRender: Refresh_JQM} -->
			<!-- /ko -->

			<div data-role="footer" data-position="fixed">
			</div>

		</div><!-- /page -->
	</body>
</html>
